<template>
	<!-- 外面最大的div -->
	<view class="sideBox">
		<!-- 头部部分 -->
		<view class="header">
			<view class="con">
				<view class="imgBox">
					<image src="../../static/img/Customermanagement-fill.png" mode=""></image>
				</view>
				<text class="txt1">请登录</text>
				<view class="userType">
					<text @click="login">登录</text>	
					<text @click="register">注册</text>	
				</view>
			</view>
		</view>
		<!-- 导航部分 -->
		<view class="centerNav">
			<!-- <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control> -->
			<!-- <view class="secNav" v-for="(item, index) in itemArr"> -->
			<view class="secNav">
				<view @click="change1"><text class="iconfont icon-jiahao"></text><text>我的收藏</text></view>
				<view @click="change2"><text class="iconfont icon-shiwuzhaoling"></text><text>我的失物招领</text></view>
				<view @click="change3"><text class="iconfont icon-list--copy"></text><text>我的新鲜事</text></view>
			</view>
			<view class="content">
				<!-- 我的收藏部分的内容-->
				<view v-show="current === 0" class="card1" v-for="(item, index) in listArr">
					<view class="imgBox2">
						<image class="i1"  @click="dian(item)" :src="item.status==1?imgsrc1:imgsrc2" mode=""></image>
						<image :src="item.active_main_picture" mode=""></image>
					</view>
					<view class="cardCon1">
						<text class="text1">{{item.username}}</text>
						<view class="enterBox1">
							<text @click="enter">报名</text>
						</view>
					</view>
				</view>
				<!-- 我的失物招领部分的内容 -->
				<view v-show="current === 1" class="card2">
					<!-- 第一列 -->
					<view class="con1"  v-for="(item, index) in listArr2">
						<!-- 上面的头像信息 -->
						<view class="con1_1">
							<view class="con1_1_1">
								<navigator url="" hover-class="navigator-hover" class="href1">
									<image :src="item.avatarurl"></image>
									<text>{{item.username}}</text>
								</navigator>
							</view>
							
							<text class="con1_1_2">{{getTime(item.create_time)}}</text>
						</view>
						<!-- 下面招领的内容信息 -->
						<navigator url="" hover-class="navigator-hover" class="href2">
							<view class="con1_2">
								<text>{{item.last_found_title}}</text>
								<text>{{item.last_found_withtitle}}</text>
							</view>
						</navigator>
					</view>
				</view>
				<!-- 我的新鲜事部分的内容 -->
				<view v-show="current === 2" class="card3">
					<!-- 第一列 -->
					<view class="con1"  v-for="(item, index) in listArr3">
						<!-- 上面的头像信息 -->
						<view class="con1_1">
							<view class="con1_1_1">
								<navigator url="" hover-class="navigator-hover" class="href1">
									<image :src="item.avatarurl"></image>
									<text>{{item.username}}</text>
								</navigator>
							</view>
							
							<text class="con1_1_2">{{getTime(item.create_time)}}</text>
						</view>
						<!-- 下面新鲜事的内容信息 -->
						<navigator url="" hover-class="navigator-hover" class="href2">
							<view class="con1_2">
								<text>{{item.title}}</text>
							</view>
							<!-- 新鲜事的图片 -->
							<view class="imgBox3" >
								<view class="imgCon" v-for="(item, index) in item.imgArr">
									<image :src="item.src" mode=""></image>
								</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
export default {
	
	data(){
		return {
			imgsrc1:'../../static/img/follow.png',
			imgsrc2:'../../static/img/shoucang.png',
			wx_user_id:1,
			current: 0,
			listArr:[],
			listArr2:[],
			listArr3:[]
		}
	},
	methods:{
		// 点击收藏
		dian(item){
			if(item.status==1){
				console.log(item.active_id)
				item.status=0
				this.$http({
					url:'/activites/addFavorites',
					data:{
						campus_activites_id:item.active_id ,
						wx_user_id : this.wx_user_id ,
					}
				}).then((res)=>{
					console.log(res)
				})
			}else{
				item.status=1
				console.log(item.active_id)
				this.$http({
					url:'/activites/unFavorite',
					data:{
						campus_activites_id :item.active_id  ,
						wx_user_id : this.wx_user_id ,
					}
				}).then((res)=>{
					console.log(res)
				})
			}
		},
		change1(){
			 this.current = 0;
			 this.$http({
				 url:'/user/myFavorites',
				 data:{
					 wx_user_id: this.wx_user_id
				 }
			 }).then(res => {
				 
				 console.log(res.data.data);
				 this.listArr = res.data.data;
			 })
			 
		},
		change2(){
			 this.current = 1;
			 this.$http({
				 url:'/user/myLastFound',
				 data:{
					 wx_user_id: this.wx_user_id
				 }
			 }).then(res => {
				 // console.log(res);
				 this.listArr2 = res.data.data;
			 })
			 
		},
		change3(){
			 this.current = 2;
			 this.$http({
				 url:'/user/myNewThing',
				 data:{
					 wx_user_id: this.wx_user_id
				 }
			 }).then(res => {
				 console.log(res.data.data);
				 this.listArr3 = res.data.data;
			 })
			 
		},
		// 获取当前时间
		getTime(time){
			var date = new Date(time);
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
			var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
			return timer;
		},
		// 点击登录按钮
		login(){
			// let user = sessionStorage.getItem('user');
			const user = uni.getStorageSync('user');
			console.log(user);
			uni.redirectTo({
				url:'../index/index'
			})
		},
		// 点击注册an'n
		register(){
			
		},
		enter(){
			uni.redirectTo({
				url:'../activity/getactivity'
			})
		}
	 
	},
	mounted(){
		this.change1();
	},
	
}
</script>

<style lang="less" scoped>
@import url('../../static/fonts/iconfont.css');
.sideBox {
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 440rpx;
		background: #f9cc66;
		.con {
			width: 138rpx;
			height: 260rpx;
			display: flex;
			flex-direction: column;
			// border: 1px solid #000;
			justify-content: space-around;
			align-items: center;
			.imgBox {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;				
				image {
					width: 120rpx;
					height: 120rpx;
					
				}
			}
			.txt1 {
				font-size: 30rpx;
				
			}
			.userType {
			    display: flex;
				justify-content: center;
				align-items: center;
				width: 210rpx;
				justify-content: space-between;
				// height: 50rpx;
				// border-radius: 20rpx;
				// border: 1px solid #000;
				text {
					font-size: 25rpx;
					width: 90rpx;
					height: 50rpx;
					border-radius: 20rpx;
					border: 1px solid #000;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
			}
		}
	}
	.centerNav {
		width: 690rpx;
		margin: 0 auto;
		.secNav {
			display: flex;
			height: 100rpx;
			align-items: center;
			justify-content: space-around;
			
			text {
				font-size: 25rpx;
			}
		}
		.content {
			margin-bottom: 50rpx;
			.card1 {
				margin-top: 34rpx;
				width: 690rpx;
				height: 416rpx;
				border-radius: 12rpx;
				overflow: hidden;
				box-shadow: 0 0 12rpx 4rpx #00000030;
				.imgBox2{
					width: 690rpx;
					height: 300rpx;
					position: relative;
					.i1{
						width: 70rpx;
						height: 70rpx;
						position: absolute;
						top: 25rpx;
						right: 30rpx;
						font-size: 50rpx;
					}
					image {
						width: 690rpx;
						height: 300rpx;
					}
				}
				.cardCon1 {
					padding: 30rpx;
					display: flex;
					justify-content: space-between;
					.text1 {
						font-size: 32rpx;
						font-weight: 600;
					}
					.enterBox1 {
						font-size: 32rpx;
						font-weight: 500;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 165rpx;
						height: 60rpx;
						background: #f9cc66;
						border-radius: 30rpx;
					}
				}
			}
			.card2 {
				margin-top: 34rpx;
				.con1 {
					padding: 20rpx 30rpxs;
					.con1_1 {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.con1_1_1 {
							navigator {
								display: flex;
								align-items: center;
								image {
									width: 80rpx;
									height: 80rpx;
								}
								text {
									font-size: 32rpx;
									font-weight: 600;
									padding-left: 20rpx;
								}
							}
							
						};
						.con1_1_2 {
							font-size: 32rpx;
							color: #878787;
						}
						
					};
					.con1_2 {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						margin-left: 80rpx;
						margin-bottom: 20rpx;
						border-bottom: 1px solid #eee;
						font-size: 32rpx;
						text:nth-child(1) {
							color: #000;
							font-size: 32rpx;
							font-weight: 600;
							padding-left: 20rpx;
							padding-top: 10rpx;
						};
						text:nth-child(2) {
							font-size: 32rpx;
							color: #878787;
							padding: 25rpx 20rpx;
						}
					}
				}
			}
			.card3 {
				margin-top: 34rpx;
				margin-bottom: 34rpx;
				.con1 {
					margin-bottom: 34rpx;
					padding: 20rpx 30rpxs;
					.con1_1 {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.con1_1_1 {
							navigator {
								display: flex;
								align-items: center;
								image {
									width: 80rpx;
									height: 80rpx;
								}
								text {
									font-size: 32rpx;
									font-weight: 600;
									padding-left: 20rpx;
								}
							}
							
						};
						.con1_1_2 {
							font-size: 32rpx;
							color: #878787;
						}
						
					};
					.con1_2 {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						margin-left: 80rpx;
						margin-bottom: 20rpx;
						// border-bottom: 1px solid #eee;
						font-size: 32rpx;
						text:nth-child(1) {
							font-size: 32rpx;
							color: #878787;
							padding: 15rpx 20rpx;
						}
					}
					.imgBox3 {
						display: flex;
						// flex-direction: column;
						flex-wrap: wrap;
						justify-content: space-around;
						margin-left: 80rpx;
						.imgCon {
							width: 190rpx;
							height: 190rpx;
							border-radius: 12rpx;
							overflow: hidden;
							image {
								width: 190rpx;
								height: 190rpx;
								
							}
						}
					}
				}
			}
		}
	}
}
	
</style>
